<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>艺伙讲师</title>
		<link rel="stylesheet" href="css/swiper.min.css">
		<script src="js/jquery-1.10.1.min.js"></script>
		<script src="js/swiper.min.js"></script>



		<link rel="stylesheet" type="text/css" href="fonts/iconfont.css" />
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/teach.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>

		<style type="text/css">
			html,
			body {
				position: relative;
				height: 100%;
			}

			body {
				background: #eee;
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				font-size: 14px;
				color: #000;
				margin: 0;
				padding: 0;
			}

			.swiper-container {
				width: 100%;
				height: 100%;
			}

			.swiper-slide {
				
				font-size: 18px;
				/*  background: #fff; */

				/* Center slide text vertically */
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				-webkit-align-items: center;
				align-items: center;
				transition: 300ms;
				transform: scale(0.8);
			}

			.swiper-slide-active,
			.swiper-slide-duplicate-active {
				transform: scale(1);
			}




			header {
				width: 100%;
				overflow: hidden;
			}

			main {
				overflow: hidden;
			}

			.tabs {
				background: rgba(238, 238, 238, 1);
				height: 0.7rem;
				display: flex;
			display: flex;
			justify-content: space-around;
			}

			.tabs a {
				flex: 1;
				height: 0.7rem;
				font-size: 0.28rem;
				font-weight: 400;
				line-height: 0.7rem;
				text-align: center;
				border-bottom: 2px solid #D8D8D8;
				color: rgba(51, 51, 51, 1);
			}

			.tabs .active {
				border-bottom: 2px solid rgba(238, 193, 79, 1) !important;
			}

			.tabs .active {
				color: rgba(238, 193, 79, 1) !important;
			}

			.box {
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<!-- header -->
			<header>
				<img src="images/top.png">
				<a href="index-rec.html"><span class="iconfont icon-left"></span></a>
				<form action="" method="post">

					<input type="text" value="" />
					<p>搜索用户艺伙号或者昵称</p>
				</form>
				<span class="s1">入驻</span>
			</header>


			<main>
				<div class="main1">
					<p>恭喜李磊类老师加入中国书法协会！！</p>
				</div>

				<div class="main2">
					<!-- Swiper -->
					<div class="swiper-container" style="background: #f1d690;">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<div class="m1">
									<div class="mm">
										<img src="images/people1.png">
									</div>
									<h2>李磊</h2>
									<div class="mm2">
										<span>艺术从业者</span>
										<span></span>
										<span>2310个学生</span>
									</div>
									<div class="mm3">
										<div class="mi">
											<img src="images/position1.png">
										</div>
										<div class="mi">
											<img src="images/position2.png">
										</div>
										<div class="mi">
											<img src="images/position3.png">
										</div>
									</div>

									<div class="mm4">
										<a class="aa" href="javascript:;">+关注</a>
									</div>

								</div>
							</div>
							
							
							<div class="swiper-slide">
								<div class="m1">
									<div class="mm">
										<img src="images/people1.png">
									</div>
									<h2>李磊</h2>
									<div class="mm2">
										<span>艺术从业者</span>
										<span></span>
										<span>2310个学生</span>
									</div>
									<div class="mm3">
										<div class="mi">
											<img src="images/position1.png">
										</div>
										<div class="mi">
											<img src="images/position2.png">
										</div>
										<div class="mi">
											<img src="images/position3.png">
										</div>
									</div>

									<div class="mm4">
										<a href="javascript:;" class="aa">+关注</a>
									</div>

								</div>
							</div>
							
							
							
							<div class="swiper-slide">
								<div class="m1">
									<div class="mm">
										<img src="images/people1.png">
									</div>
									<h2>李磊</h2>
									<div class="mm2">
										<span>艺术从业者</span>
										<span></span>
										<span>2310个学生</span>
									</div>
									<div class="mm3">
										<div class="mi">
											<img src="images/position1.png">
										</div>
										<div class="mi">
											<img src="images/position2.png">
										</div>
										<div class="mi">
											<img src="images/position3.png">
										</div>
									</div>
							
									<div class="mm4">
										<a href="javascript:;" class="aa">+关注</a>
									</div>
							
								</div>
							</div>
							
							
							<div class="swiper-slide">
								<div class="m1">
									<div class="mm">
										<img src="images/people1.png">
									</div>
									<h2>李磊</h2>
									<div class="mm2">
										<span>艺术从业者</span>
										<span></span>
										<span>2310个学生</span>
									</div>
									<div class="mm3">
										<div class="mi">
											<img src="images/position1.png">
										</div>
										<div class="mi">
											<img src="images/position2.png">
										</div>
										<div class="mi">
											<img src="images/position3.png">
										</div>
									</div>
							
									<div class="mm4">
										<a href="javascript:;" class="aa">+关注</a>
									</div>
							
								</div>
							</div>
							
							
							<div class="swiper-slide">
								<div class="m1">
									<div class="mm">
										<img src="images/people1.png">
									</div>
									<h2>李磊</h2>
									<div class="mm2">
										<span>艺术从业者</span>
										<span></span>
										<span>2310个学生</span>
									</div>
									<div class="mm3">
										<div class="mi">
											<img src="images/position1.png">
										</div>
										<div class="mi">
											<img src="images/position2.png">
										</div>
										<div class="mi">
											<img src="images/position3.png">
										</div>
									</div>
							
									<div class="mm4">
										<a href="javascript:;" class="aa">+关注</a>
									</div>
							
								</div>
							</div>
							
							
							<div class="swiper-slide">
								<div class="m1">
									<div class="mm">
										<img src="images/people1.png">
									</div>
									<h2>李磊</h2>
									<div class="mm2">
										<span>艺术从业者</span>
										<span></span>
										<span>2310个学生</span>
									</div>
									<div class="mm3">
										<div class="mi">
											<img src="images/position1.png">
										</div>
										<div class="mi">
											<img src="images/position2.png">
										</div>
										<div class="mi">
											<img src="images/position3.png">
										</div>
									</div>
							
									<div class="mm4">
										<a href="javascript:;" class="aa">+关注</a>
									</div>
							
								</div>
							</div>
							
							<div class="swiper-slide">
								<div class="m1">
									<div class="mm">
										<img src="images/people1.png">
									</div>
									<h2>李磊</h2>
									<div class="mm2">
										<span>艺术从业者</span>
										<span></span>
										<span>2310个学生</span>
									</div>
									<div class="mm3">
										<div class="mi">
											<img src="images/position1.png">
										</div>
										<div class="mi">
											<img src="images/position2.png">
										</div>
										<div class="mi">
											<img src="images/position3.png">
										</div>
									</div>
							
									<div class="mm4">
										<a href="javascript:;" class="aa">+关注</a>
									</div>
							
								</div>
							</div>
							<!-- <div class="swiper-slide">Slide 3</div>
							<div class="swiper-slide">Slide 4</div>
							<div class="swiper-slide">Slide 5</div>
							<div class="swiper-slide">Slide 6</div>
							<div class="swiper-slide">Slide 7</div>
							<div class="swiper-slide">Slide 8</div>
							<div class="swiper-slide">Slide 9</div>
							<div class="swiper-slide">Slide 10</div> -->
						</div>
						<!-- Add Pagination -->
						<!-- <div class="swiper-pagination"></div> -->
					</div>





				</div>
                
                <div class="tabs">
                					<a href="#" class="active">专家</a>
                					<a href="#">金牌导师</a>
                					<a href="#">导师</a>
                					<a href="#">金牌讲师</a>
                					<a href="#">讲师</a>
                				</div>
                				<div id="tabs-container" class="swiper-container1">
                					<div class="swiper-wrapper">
                						<div class="swiper-slide">
                							<ul class="news-list">
                								<div class="box">
                									<div class="main4">
                										<figure>
                											<div class="f">
                												<img src="images/ic1.png">
                											</div>
                											<figcaption>
                												<div class="f1">
                													<h2>路正先</h2>
                													<p class="p1">油画棒艺术开创者</p>
                													<p class="p2">油画棒</p>
                												</div>
                												<div class="f2">
                													<a href="javascript:;">+关注</a>
                													<p>5950个学生</p>
                												</div>
                
                											</figcaption>
                
                										</figure>
                
                
                										<figure>
                											<div class="f">
                												<img src="images/ic2.png">
                											</div>
                											<figcaption>
                												<div class="f1">
                													<h2>齐晓晶</h2>
                													<p class="p1">艺术从业者</p>
                													<p class="p2">油画、彩铅</p>
                												</div>
                												<div class="f2">
                													<a href="javascript:;">+关注</a>
                													<p>5720个学生</p>
                												</div>
                
                											</figcaption>
                
                										</figure>
                
                										<figure>
                											<div class="f">
                												<img src="images/ic3.png">
                											</div>
                											<figcaption>
                												<div class="f1">
                													<h2>黄有维</h2>
                													<p class="p1">水彩艺术家</p>
                													<p class="p2">油画、水彩</p>
                												</div>
                												<div class="f2">
                													<a href="javascript:;">+关注</a>
                													<p>5530个学生</p>
                												</div>
                
                											</figcaption>
                
                										</figure>
                
                										<figure>
                											<div class="f">
                												<img src="images/ic4.png">
                											</div>
                											<figcaption>
                												<div class="f1">
                													<h2>初荷</h2>
                													<p class="p1">水彩艺术家</p>
                													<p class="p2">水彩</p>
                												</div>
                												<div class="f2">
                													<a href="javascript:;">+关注</a>
                													<p>5256个学生</p>
                												</div>
                
                											</figcaption>
                
                										</figure>
                
                										<figure>
                											<div class="f">
                												<img src="images/ic5.png">
                											</div>
                											<figcaption>
                												<div class="f1">
                													<h2>张奇</h2>
                													<p class="p1">油画艺术家</p>
                													<p class="p2">素描、油画、美术史</p>
                												</div>
                												<div class="f2">
                													<a href="javascript:;">+关注</a>
                													<p>4900个学生</p>
                												</div>
                
                											</figcaption>
                
                										</figure>
                
                									</div>
                
                								</div>
                
                
                							</ul>
                						</div>
                
                						<!-- 2 -->
                						<div class="swiper-slide">
                							<ul class="news-list">
                								<div style="display:block;" class="box">
                									<div class="main4">
                										<figure>
                											<div class="f">
                												<img src="images/ic1.png">
                											</div>
                											<figcaption>
                												<div class="f1">
                													<h2>路正先</h2>
                													<p class="p1">油画棒艺术开创者</p>
                													<p class="p2">油画棒</p>
                												</div>
                												<div class="f2">
                													<a href="javascript:;">+关注</a>
                													<p>5950个学生</p>
                												</div>
                
                											</figcaption>
                
                										</figure>
                									</div>
                
                
                								</div>
                
                							</ul>
                						</div>
                
                						<!-- 3 -->
                						<div class="swiper-slide">
                							<ul class="news-list">
                
                								<div class="box">
                
                
                									<div class="main4">
                										<figure>
                											<div class="f">
                												<img src="images/ic2.png">
                											</div>
                											<figcaption>
                												<div class="f1">
                													<h2>齐晓晶</h2>
                													<p class="p1">艺术从业者</p>
                													<p class="p2">油画、彩铅</p>
                												</div>
                												<div class="f2">
                													<a href="javascript:;">+关注</a>
                													<p>5720个学生</p>
                												</div>
                
                											</figcaption>
                
                										</figure>
                									</div>
                
                								</div>
                
                							</ul>
                						</div>
                
                
                
                						<!-- 5 -->
                						<div class="swiper-slide">
                							<ul class="news-list">
                
                								<div class="box">
                									<div class="main4">
                										<figure>
                											<div class="f">
                												<img src="images/ic4.png">
                											</div>
                											<figcaption>
                												<div class="f1">
                													<h2>初荷</h2>
                													<p class="p1">水彩艺术家</p>
                													<p class="p2">水彩</p>
                												</div>
                												<div class="f2">
                													<a href="javascript:;">+关注</a>
                													<p>5256个学生</p>
                												</div>
                
                											</figcaption>
                
                										</figure>
                									</div>
                
                								</div>
                
                							</ul>
                						</div>
                
                
                
                						<!-- 4 -->
                						<div class="swiper-slide">
                							<ul class="news-list">
                
                								<div class="box">
                									<div class="main4">
                										<figure>
                											<div class="f">
                												<img src="images/ic3.png">
                											</div>
                											<figcaption>
                												<div class="f1">
                													<h2>黄有维</h2>
                													<p class="p1">水彩艺术家</p>
                													<p class="p2">油画、水彩</p>
                												</div>
                												<div class="f2">
                													<a href="javascript:;">+关注</a>
                													<p>5530个学生</p>
                												</div>
                
                											</figcaption>
                
                										</figure>
                
                									</div>
                
                								</div>
                
                						</div>
                
                						</ul>
                					</div>
                
                
                				</div>


				
		</div>
		</main>
		</div>
		<script src="js/teach.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function() {

var swiper = new Swiper('.swiper-container', {
				slidesPerView: 3,
				spaceBetween: 205,
				centeredSlides: true,
				loop: true,
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
			});




				var tabsSwiper = new Swiper('#tabs-container', {
					speed: 500,
					on: {
						slideChangeTransitionStart: function() {
							$(".tabs .active").removeClass('active');
							$(".tabs a").eq(this.activeIndex).addClass('active');
						}
					}
				})
				$(".tabs a").on('click', function(e) {
					e.preventDefault()
					$(".tabs .active").removeClass('active')
					$(this).addClass('active')
					tabsSwiper.slideTo($(this).index())
				})
			}
		</script>
		
		<script>
			
		</script>
	</body>
</html>



